<template>
  <div class="login-page">
    <div class="login-container">
      <h1 class="login-title">校园二手平台登录</h1>
      <!-- 登录表单容器，提交时阻止默认刷新行为并调用handleLogin方法 -->
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label class="form-label">学号</label>
          <input 
            type="text" 
            class="form-control"
            placeholder="请输入学号"
            v-model="studentId"
            required
          >
        </div>
        
        <div class="form-group">
          <label class="form-label">密码</label>
          <input 
            type="password" 
            class="form-control"
            placeholder="请输入密码"
            v-model="password"
            required
          >
        </div>
        
        <div class="form-group remember">
          <input type="checkbox" id="remember" v-model="rememberMe">
          <label for="remember">记住我</label>
        </div>
        
        <button type="submit" class="btn btn-primary login-btn">登录</button>

        <!-- 错误信息显示区域 -->
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </form>
      
    </div>

    <div class="home-page">
      <!-- 添加搜索提示 -->
      <div v-if="route.query.q" class="search-notice">
        搜索关键词: "{{ route.query.q }}"
        <button class="clear-search" @click="clearSearch">清除</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ItemCard from './ItemCard.vue'

export default {
  components: { ItemCard },
  setup() {
    const router = useRouter()
    const route = useRoute()  // 确保在这里定义 route

    // 使用注入获取用户对象
    const user = inject('user')
    
    const studentId = ref('')
    const password = ref('')
    const rememberMe = ref(false)
    const errorMessage = ref('')
    
    // 模拟登录验证
    const validateCredentials = (id, pwd) => {
      const validUsers = [
        { id: '23265120110', pwd: '123456', name: '陈安', college: '国际教育学院' },
        { id: '23265120120', pwd: '123456', name: '严志烽', college: '国际教育学院' },
        { id: '23265120121', pwd: '123456', name: '陈佳承', college: '国际教育学院' }
      ]
      
      return validUsers.find(user => user.id === id && user.pwd === pwd)
    }
    
    const handleLogin = () => {
      errorMessage.value = ''
      
      // 实际项目中这里会调用API
      const validUser = validateCredentials(studentId.value, password.value)
      
      if (validUser) {
        // 登录成功
        const userData = {
          name: validUser.name,
          college: validUser.college,
          itemsPosted: Math.floor(Math.random() * 1) + 0,
          itemsSold: Math.floor(Math.random() * 8) + 0,
          rating: (Math.random() * 0.5 + 4.5).toFixed(1)
        }
        
        // 调用用户登录方法
        user.login(userData)
        
        // 重定向到之前访问的页面或首页
        const redirect = router.currentRoute.value.query.redirect || '/'
        router.push(redirect)
      } else {
        errorMessage.value = '学号或密码错误，请重试'
      }
    }
    const clearSearch = () => {
      router.push({ path: '/', query: {} }) // 清除查询参数
    }
    
    return {
      studentId,
      password,
      rememberMe,
      errorMessage,
      handleLogin,
      route,  // 确保将 route 返回
      clearSearch
    }
  }
}
</script>

<style scoped>
/* 登录页面布局样式 */
.login-page {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  min-height: 100vh;       /* 最小高度为整个视口高度 */
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 渐变背景 */
  padding: 20px;           /* 内边距 */
}
/* 登录框容器样式 */
.login-container {
  background: white;               /* 白色背景 */
  border-radius: var(--border-radius); /* 使用CSS变量设置圆角 */
  box-shadow: var(--shadow);       /* 使用CSS变量设置阴影 */
  width: 100%;                    /* 响应式宽度 */
  max-width: 450px;               /* 最大宽度限制 */
  padding: 40px;                  /* 内边距 */
  text-align: center;             /* 内容居中 */
}
/* 标题样式 */
.login-title {
  color: var(--primary-color);    /* 使用主色调 */
  margin-bottom: 30px;             /* 底部外边距 */
  font-size: 1.8rem;              /* 字体大小 */
}
/* 表单样式 */
.login-form {
  text-align: left;               /* 表单内容左对齐 */
}
/* 记住我复选框布局 */
.form-group.remember {
  display: flex;                   /* 弹性布局 */
  align-items: center;            /* 垂直居中 */
  margin: 15px 0 25px;            /* 外边距 */
}

.form-group.remember input {
  margin-right: 10px;             /* 复选框右侧间距 */
}

/* 登录按钮样式 */
.login-btn {
  width: 100%;                    /* 全宽按钮 */
  padding: 12px;                  /* 内边距 */
  font-size: 1.1rem;              /* 字体大小 */
  margin-bottom: 20px;            /* 底部外边距 */
}


/* 错误信息样式 */
.error-message {
  color: var(--danger-color);     /* 使用红色 */
  text-align: center;             /* 居中显示 */
  margin-top: 15px;               /* 顶部外边距 */
  font-weight: 500;               /* 中等字重 */
}
/* 搜索提示框样式 */
.search-notice {
  background-color: var(--light-color); /* 浅色背景 */
  padding: 15px;                  /* 内边距 */
  border-radius: var(--border-radius); /* 圆角 */
  margin-bottom: 20px;             /* 底部外边距 */
  display: flex;                   /* 弹性布局 */
  justify-content: space-between;  /* 两端对齐 */
  align-items: center;             /* 垂直居中 */
}
/* 清除搜索按钮样式 */
.clear-search {
  background: none; /* 设置透明背景 */
  border: 1px solid var(--gray-color); /* 使用CSS变量设置灰色边框 */
  color: var(--gray-color); /* 使用CSS变量设置文字颜色 */
  padding: 5px 10px; /* 设置内边距（上下5px，左右10px） */
  border-radius: var(--border-radius); /* 使用CSS变量设置圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
  transition: all 0.3s; /* 所有属性变化添加0.3秒过渡动画 */
}

.clear-search:hover {
  background-color: #f8f9fa;/* 悬停时浅灰色背景 */
}
</style>